<script setup>
import {reactive} from 'vue'

const dataChart = reactive({
  title: {
    left: 'center',
    text: '83.3%',
    top: '35%',
    itemGap: 5,
    textStyle: {
      fontSize: 22,
      fontWeight: 'bold',
      color: '#fff'
    },
    subtext: '平均值',
    subtextStyle: {
      fontSize: 13,
      color: '#fff'
    }
  },
  series: [
    {
      name: '',
      type: 'pie',
      clockwise: false,
      radius: ['77%', '83%'],
      label: {
        show: false
      },
      labelLine: {
        show: false
      },
      itemStyle: {
        color: '#2B3643',
      },
      data: [
        {
          value: 100,
        }
      ]
    },
    {
      name: '最高值',
      type: 'pie',
      clockwise: false,
      radius: ['74%', '86%'],
      label: {
        show: false
      },
      labelLine: {
        show: false
      },
      itemStyle: {
        color: '#7874FC',
      },
      data: [
        {
          value: 10,
          itemStyle: {
            color: "transparent"
          }
        },
        {
          value: 90,
        }
      ]
    },
    {
      name: '最低值',
      type: 'pie',
      clockwise: false,
      radius: ['70%', '90%'],
      label: {
        show: false
      },
      labelLine: {
        show: false
      },
      itemStyle: {
        color: '#00DCFD',
      },
      emphasis: {
        disabled: true
      },
      data: [
        {
          value: 70,
          itemStyle: {
            color: "transparent"
          }
        },
        {
          value: 30,
        }
      ]
    }
  ]
})
const dataChart2 = reactive({
  title: {
    left: 'center',
    text: '75.3',
    top: '35%',
    itemGap: 5,
    textStyle: {
      fontSize: 22,
      fontWeight: 'bold',
      color: '#fff'
    },
    subtext: '平均值',
    subtextStyle: {
      fontSize: 13,
      color: '#fff'
    }
  },
  series: [
    {
      name: '',
      type: 'pie',
      clockwise: false,
      radius: ['77%', '83%'],
      label: {
        show: false
      },
      labelLine: {
        show: false
      },
      itemStyle: {
        color: '#2B3643',
      },
      data: [
        {
          value: 100,
        }
      ]
    },
    {
      name: '最高值',
      type: 'pie',
      clockwise: false,
      radius: ['74%', '86%'],
      label: {
        show: false
      },
      labelLine: {
        show: false
      },
      itemStyle: {
        color: '#7874FC',
      },
      data: [
        {
          value: 10,
          itemStyle: {
            color: "transparent"
          }
        },
        {
          value: 90,
        }
      ]
    },
    {
      name: '最低值',
      type: 'pie',
      clockwise: false,
      radius: ['70%', '90%'],
      label: {
        show: false
      },
      labelLine: {
        show: false
      },
      itemStyle: {
        color: '#00DCFD',
      },
      emphasis: {
        disabled: true
      },
      data: [
        {
          value: 70,
          itemStyle: {
            color: "transparent"
          }
        },
        {
          value: 30,
        }
      ]
    }
  ]
})
const dataChart3 = reactive({
  title: {
    left: 'center',
    text: '35',
    top: '35%',
    itemGap: 5,
    textStyle: {
      fontSize: 22,
      fontWeight: 'bold',
      color: '#fff'
    },
    subtext: '平均值',
    subtextStyle: {
      fontSize: 13,
      color: '#fff'
    }
  },
  series: [
    {
      name: '',
      type: 'pie',
      clockwise: false,
      radius: ['77%', '83%'],
      label: {
        show: false
      },
      labelLine: {
        show: false
      },
      itemStyle: {
        color: '#2B3643',
      },
      data: [
        {
          value: 100,
        }
      ]
    },
    {
      name: '最高值',
      type: 'pie',
      clockwise: false,
      radius: ['74%', '86%'],
      label: {
        show: false
      },
      labelLine: {
        show: false
      },
      itemStyle: {
        color: '#7874FC',
      },
      data: [
        {
          value: 10,
          itemStyle: {
            color: "transparent"
          }
        },
        {
          value: 90,
        }
      ]
    },
    {
      name: '最低值',
      type: 'pie',
      clockwise: false,
      radius: ['70%', '90%'],
      label: {
        show: false
      },
      labelLine: {
        show: false
      },
      itemStyle: {
        color: '#00DCFD',
      },
      emphasis: {
        disabled: true
      },
      data: [
        {
          value: 70,
          itemStyle: {
            color: "transparent"
          }
        },
        {
          value: 30,
        }
      ]
    }
  ]
})
</script>

<template>
  <div class="cu-bg">
    <div class="common-title">施工单位</div>
    <div class="cu-list">
      <div class="cu-item">
        <v-chart class="cu-chart" :option="dataChart" autoresize></v-chart>
        <div class="cu-legend">
          <span class="cu-icon-max"></span>
          <span class="cul-title">最高值 96.5%</span>
        </div>
        <div class="cu-legend">
          <span class="cu-icon-min"></span>
          <span class="cul-title">最低值 21.3%</span>
        </div>
        <div class="cu-item-title">
          达标考评<br/>达标率
        </div>
      </div>
      <div class="cu-item">
        <v-chart class="cu-chart" :option="dataChart2" autoresize></v-chart>
        <div class="cu-legend">
          <span class="cu-icon-max"></span>
          <span class="cul-title">最高值 96.5</span>
        </div>
        <div class="cu-legend">
          <span class="cu-icon-min"></span>
          <span class="cul-title">最低值 21.3</span>
        </div>
        <div class="cu-item-title">
          绩效考评<br/>百分制
        </div>
      </div>
      <div class="cu-item">
        <v-chart class="cu-chart" :option="dataChart3" autoresize></v-chart>
        <div class="cu-legend">
          <span class="cu-icon-max"></span>
          <span class="cul-title">最高值 65</span>
        </div>
        <div class="cu-legend">
          <span class="cu-icon-min"></span>
          <span class="cul-title">最低值 2</span>
        </div>
        <div class="cu-item-title">
          日常打分<br/>扣分
        </div>
      </div>
      <div class="cu-item">
        <v-chart class="cu-chart" :option="dataChart3" autoresize></v-chart>
        <div class="cu-legend">
          <span class="cu-icon-max"></span>
          <span class="cul-title">最高值 65</span>
        </div>
        <div class="cu-legend">
          <span class="cu-icon-min"></span>
          <span class="cul-title">最低值 2</span>
        </div>
        <div class="cu-item-title">
          不良行为<br/>扣分
        </div>
      </div>
      <div class="cu-item">
        <v-chart class="cu-chart" :option="dataChart3" autoresize></v-chart>
        <div class="cu-legend">
          <span class="cu-icon-max"></span>
          <span class="cul-title">最高值 65</span>
        </div>
        <div class="cu-legend">
          <span class="cu-icon-min"></span>
          <span class="cul-title">最低值 2</span>
        </div>
        <div class="cu-item-title">
          自动采集问题<br/>数量
        </div>
      </div>
      <div class="cu-item">
        <v-chart class="cu-chart" :option="dataChart3" autoresize></v-chart>
        <div class="cu-legend">
          <span class="cu-icon-max"></span>
          <span class="cul-title">最高值 65</span>
        </div>
        <div class="cu-legend">
          <span class="cu-icon-min"></span>
          <span class="cul-title">最低值 2</span>
        </div>
        <div class="cu-item-title">
          工程暂停令<br/>数量
        </div>
      </div>
      <div class="cu-item">
        <v-chart class="cu-chart" :option="dataChart3" autoresize></v-chart>
        <div class="cu-legend">
          <span class="cu-icon-max"></span>
          <span class="cul-title">最高值 65</span>
        </div>
        <div class="cu-legend">
          <span class="cu-icon-min"></span>
          <span class="cul-title">最低值 2</span>
        </div>
        <div class="cu-item-title">
          安全质量问题<br/>数量
        </div>
      </div>
    </div>

  </div>
</template>


<style scoped>
.cu-bg {
  margin: 62px 27px 0 27px;
  background: url("../assets/bg-unit.png") no-repeat;
  background-size: 100% 100%;
  height: 334px;
}
.cu-list {
  margin-top: 15px;
  display: flex;
  justify-content: space-around;
}
.cu-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cu-chart {
  width: 120px;
  height: 120px;
}
.cu-legend {
  display: flex;
  align-items: center;
  height: 17px;
  margin-top: 8px;
}
.cu-icon-max {
  width: 8px;
  height: 8px;
  background: #7874FC;
  border-radius: 8px;
}
.cu-icon-min {
  width: 8px;
  height: 8px;
  background: #00DCFD;
  border-radius: 8px;
}
.cul-title {
  font-size: 12px;
  font-family: PingFang SC-Regular, PingFang SC sans-serif;
  font-weight: 400;
  color: #FFFFFF;
  margin-left: 5px;
}
.cu-item-title {
  line-height: 20px;
  font-size: 14px;
  font-family: PingFang SC-Bold, PingFang SC sans-serif;
  font-weight: bold;
  color: #32C9D3;
  text-align: center;
  margin-top: 14px;
}
</style>